<template>
  <div class="header">
    <div class="title" v-show="!sort1">产品分类</div>
    <div class="menu" v-show="sort1">
      <ul>
        <router-link to="/" tag="li">{{sort1}}</router-link>
        <router-link to="Component2" tag="li" v-show="sort2">> {{sort2}}</router-link>
        <router-link to="Component3" tag="li" v-show="sort3">> {{sort3}}</router-link>
      </ul>
    </div>
    <!-- <ul>
      <router-link
        :to="{name:item}"
        v-for="(item,index) in titles"
        :key="index"
        :class="{'active':item==$route.name}"
        tag="li"
      >{{item}}</router-link>
    </ul>-->
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      //   titles: ["Component1", "Component2", "Component3"],
      sort1: "",
      sort2: "",
      sort3: ""
    };
  },
  watch: {
    $route() {
      this.getTitle();
    }
  },
  created() {
    this.getTitle();
  },
  methods: {
    getTitle() {
      debugger;
      switch (this.$route.name) {
        case "Component1":
          this.sort1 = "";
          this.sort2 = "";
          break;
        case "Component2":
          this.sort1 = "分类1";
          if (this.$route.query.name1) {
            this.sort2 = this.$route.query.name1;
          }
          this.sort3 = "";
          break;
        case "Component3":
          this.sort3 = this.$route.query.name2;
          break;
      }
    }
  }
};
</script>

<style scoped>
.header {
  width: 100%;
  line-height: 80px;
  color: #fff;
  text-align: left;
  background-color: yellowgreen;
}
.menu,
.title {
  width: 80%;
  height: 80px;
  margin: auto;
}

.menu ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
}

.menu ul li {
  height: 100%;
  text-align: center;
  color: #176498;
  padding-right: 10px;
  cursor: pointer;
}
/* .header ul {
  width: 60%;
  margin: auto;
  display: flex;
  justify-content: space-around;
}
.header ul li {
  cursor: pointer;
}
.active {
  font-weight: bold;
  color: wheat;
} */
</style>